<template>
  <view class="un-preview-img-item-container">
    <movable-area
      class="movable-area"
      :scale-area="false"
      :style="[movableAreaStyle]">
      <movable-view
        class="movable-view"
        :scale="!disabled"
        :disabled="disabled"
        direction="all"
        :scale-min="scaleMin"
        :scale-max="scaleMax"
        :inertia="true"
        :friction="0.6"
        :out-of-bounds="false"
        :damping="100"
        :scale-value="scaleVal"
        :x="x"
        :y="y"
        :style="[movableViewStyle]"
        @change="handleMove"
        @scale="handleScale"
        @tap="handleTap">
        <scroll-view v-show="scaleVal <= 1" class="scroll-view" :scroll-y="true" :style="[scrollViewStyle]">
          <image :src="imgField ? data[imgField] : data" class="preview-img" mode="widthFix" @load="handleImgLoad"/>
        </scroll-view>
        <image v-show="scaleVal > 1" :src="imgField ? data[imgField] : data" class="preview-img" mode="widthFix"
               @load="handleImgLoad"/>
      </movable-view>
    </movable-area>
  </view>
</template>
<script>

export default {
  name: 'UnPreviewImageItem',
  // #ifdef MP-WEIXIN
  options: {
    virtualHost: true
  },
  // #endif
  props: {
    // 数据项
    data: {
      type: [Object, String],
      required: true
    },
    // 当前下标
    index: {
      type: Number,
      required: true
    },
    systemInfo: {
      type: Object,
      required: true
    },
    // 图片字段名
    imgField: {
      type: String,
    },
    // 是否禁用，同时禁用移动和缩放
    disabled: {
      type: Boolean,
      default: false
    },
    // 最小缩放
    scaleMin: {
      type: Number,
      default: 1
    },
    // 最大缩放
    scaleMax: {
      type: Number,
      default: 3
    },
    // 缩放值
    scaleValue: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      // 当前缩放值
      scaleVal: 1,
      // x位置
      x: 0,
      // y位置
      y: 0,
      // 图片原宽度
      imgWidth: 0,
      // 图片原高度
      imgHeight: 0,
    }
  },
  computed: {
    // 图片现在的真是高度，因为图片预览使用窗口宽度作为宽度，所以需要通过窗口大小进行计算高度
    realImgHeight() {
      if (this.imgWidth === 0 || this.imgHeight === 0) {
        // 等于0说明未初始化
        return 0
      } else {
        return Math.ceil(this.imgHeight * this.systemInfo.windowWidth / this.imgWidth)
      }
    },
    movableAreaStyle() {
      const style = {}
      const imgHeight = this.realImgHeight
      if (imgHeight !== 0 && imgHeight < this.systemInfo.windowHeight) {
        style.height = `${imgHeight}px`;
      } else {
        style.height = '100%';
      }
      return style
    },
    scrollViewStyle() {
      const style = {}
      const imgHeight = this.realImgHeight
      if (imgHeight !== 0 && imgHeight < this.systemInfo.windowHeight && this.scaleVal <= 1) {
        style.height = `auto`;
      } else {
        style.height = '100vh';
      }
      return style
    },
    movableViewStyle() {
      const style = {}
      if (this.scaleVal <= 1) {
        style.height = '100%'
      } else {
        const imgHeight = this.realImgHeight
        if (imgHeight === 0) {
          // 等于0说明未初始化
          style.height = 'auto';
        } else {
          style.height = `${imgHeight}px`
        }
      }
      return style
    }
  },
  watch: {
    // 监听缩放属性变化，改变当前缩放值
    scaleValue: {
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          this.scaleVal = newVal
        }
      }
    }
  },
  methods: {
    // 监听拖拽移动
    handleMove(e) {
      this.x = e.detail.x
      this.y = e.detail.y
    },
    // 监听双指缩放
    handleScale(e) {
      this.scaleVal = e.detail.scale
      this.$emit('scale', this.scaleVal)
    },
    // 监听点击
    handleTap() {
      this.$emit('click')
    },
    getScale() {
      return this.scaleVal
    },
    handleImgLoad(e) {
      this.imgWidth = e.detail.width
      this.imgHeight = e.detail.height
    }
  },
  mounted() {
    // uni.getImageInfo({
    //   src: this.imgField ? this.data[this.imgField] : this.data,
    //   success: (res) => {
    //     console.log(res)
    //   }
    // })
  }
}
</script>

<style scoped lang="scss">
.un-preview-img-item-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  .movable-area {
    width: 100%;
    height: auto;
    max-height: 100%;

    .movable-view {
      width: 100%;
      height: auto;

      .scroll-view {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
      }

      .preview-img {
        width: 100%;
      }
    }
  }
}
</style>
